<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        #container {
            overflow: hidden;
            width: 300%;
            height: 300px;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <div class="layui-form timo-compile">
    <form id="grid_form" th:action="@{/realty/grid/save}">
        <input type="hidden" name="id" th:if="${grid}" th:value="${grid.id}">
        <input style="display:none;">
        <input style="display:none;">
        <div class="layui-form-item">
            <label class="layui-form-label">网格编码</label>
            <div class="layui-input-inline ">
                <input class="layui-input" type="text" name="name" placeholder="请输入网格编码" th:value="${grid?.name}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">网格所含楼号-单元号</label>
            <div class="layui-input-inline tags">
                <input class="layui-input" type="text" name="include_areas" th:value="${grid?.include_areas}">
<!--                <input type="text" name="include_areas" class="layui-input inputTags" id="inputTags" placeholder="请输入网格所含楼号-单元号" autocomplete="off">-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">网格面积</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="area_size" placeholder="请输入网格面积" th:value="${grid?.area_size}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">经纬度</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" id="jingwei" name="jingwei" placeholder="请选择地图上的点" th:value="${grid?.jingwei}">
                <div id="container"></div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark">[[${grid?.remark}]]</textarea>
            </div>
        </div>
        <div class="layui-form-item timo-finally">
            <button  class="layui-btn ajax-submit" id="submit_btn"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
    <script th:replace="/common/template :: script"></script>
    <script th:inline="javascript">
        //js渲染
        // layui.use(['inputTags', 'jquery'], function () {
        //     var inputTags = layui.inputTags;
        //     //动态获取数据渲染时内容是一个数组
        //     // 初始化
        //     var whiteListIp = [];
        //     //elem为输入框元素
        //     inputTags.render({
        //         elem: '#inputTags',
        //         content: whiteListIp
        //     });
        // });
        // 百度地图API功能
        var map = new BMap.Map("container");    // 创建Map实例

        var addressStr = [[${community_base.address + community_base.name}]];
        var open_status = [[${community_base.open_status}]];
        console.log($("#jingwei").val())
        if($("#jingwei").val()){
            map.centerAndZoom(new BMap.Point($("#jingwei").val().split(",")[0], $("#jingwei").val().split(",")[1]), 18)
            var point = new BMap.Point($("#jingwei").val().split(",")[0], $("#jingwei").val().split(",")[1])
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
        }else{
            map.centerAndZoom(addressStr, 18)

        }
        // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));
        var mapStyle={
            style: open_status == '1'?'light':'dark'
        };
        map.setMapStyle(mapStyle);
        map.enableScrollWheelZoom(true);
        map.setCurrentCity("济南");          // 设置地图显示的城市 此项是必须设置的

        map.addEventListener('click', function (e) {
            map.clearOverlays();
            $("#jingwei").val(e.point.lng + ',' + e.point.lat);
            var point = new BMap.Point(e.point.lng, e.point.lat)
            var marker = new BMap.Marker(point,{strokeColor: "blue"});
            map.addOverlay(marker);
        });
    </script>
</body>
</html>